<template>
	<view class="location-wrapper">
		<u-sticky offset-top="0">
			<view class="" :style="{height: `${statusBarHeight}px`}"></view>
			<view class="top-location-serach-wrapper flex-c-s">
				<view class="select-address flex-c">
					<uni-icons type="back" size="24"></uni-icons>
				</view>
				<view class="search-address">
					<uni-search-bar @confirm="search"  v-model="searchValue" placeholder="输入地址名称搜索"
						@input="input" cancelButton="none" @cancel="cancel" @clear="clear" radius="30">
					</uni-search-bar>
				</view>
			</view>
		</u-sticky>
		<view class="again-location flex-c-s b-b-1">
			<text class="fz26">{{ currentAddress }}</text>
			<view class="flex-c">
				<text class="color-theme fz26">重新定位</text>
				<image src="/static/images/location.png" style="width: 34rpx; height: 34rpx;" mode=""></image>
			</view>
		</view>


		<view class="">
			<view class="" :style="{height: `${statusBarHeight}px`}"></view>
			<DaCitySelector :visible="citySelectorVisible" themeColor="#EB5480" :showLocate="false" 
				:cityValue="citySelectedValue" @confirm="handleConfirm" @close="handleClose"></DaCitySelector>
		</view>
		<view>{{ cityNames }}</view>
	</view>
</template>

<script lang="ts">
	import { defineComponent, reactive, toRefs, ref } from 'vue'
	import { onReady } from '@dcloudio/uni-app'

	import DaCitySelector from '@/components/da-city-selector/index.vue'

	export default defineComponent({
		components: { DaCitySelector },
		setup() {
			const state = reactive({
				currentAddress: '天水市',
				searchValue: '',
				statusBarHeight: 0,
				resultList: [
					{ name: '西安市仿古街', description: '西安市未央区未央路65号', distance: 85 },
					{ name: '大雁塔音乐喷泉', description: '西安市雁塔区雁南路', distance: 78 },
				]
			})

			const citySelectedValue = ref(null)

			const cityItems = ref([])
			const cityNames = ref('')

			const citySelectorVisible = ref(false)

			function onShowCitySelector() {
				// 加载已选内容
				citySelectedValue.value = cityItems.value?.map((k) => k.id)

				citySelectorVisible.value = true
			}

			function handleConfirm(val: any) { 
				uni.$emit('addeventListenerLocation1', val) 
				uni.navigateBack()
				
			}
			function handleClose() { 
				citySelectorVisible.value = false
			}


			onReady(() => {
				uni.getSystemInfo({
					success(res) {
						state.statusBarHeight = res.statusBarHeight || 0
					}
				})
				citySelectorVisible.value = true
			})

			const search = () => {

			}

			const clear = () => {

			}

			const cancel = () => {

			}
			const input = () => {

			}


			return {
				search,
				clear,
				cancel,
				input,

				citySelectorVisible,
				citySelectedValue,

				cityItems,
				cityNames,

				onShowCitySelector,
				handleConfirm,
				handleClose,


				...toRefs(state)
			}
		}
	})
</script>

<style>
	page {
		background-color: #f8f8fa;
	}
</style>

<style lang="scss" scoped>
	.location-wrapper {
		.top-location-serach-wrapper {
			background-color: #fff;

			.select-address {
				width: 60rpx;
				margin-left: 24rpx;
			}

			.search-address {
				flex: 1;
			}
		}

		.search-result-list {
			background-color: #fff;
			padding: 24rpx;

			.result-item {
				padding: 20rpx 0;
			}
		}

		.again-location {
			background-color: #fff;
			padding: 24rpx;
		}
	}
</style>